<template>
	<div class="search">
		<div class="logo" @click="clearData">
			<img :src="logo" alt="logo">
			<p class="name">
				<span>{{siteInfo.sitename}}城乡家园服务网</span>
				<span>WWW.JYFU.COM</span>
			</p>
		</div>
		<p class="station-numner" >本站编号{{siteInfo.site_number}}</p>
		<van-search v-model="value" placeholder="成都居住证办理流程" show-action @search="onSearch" background="#fff">
			<div slot="action" @click="onSearch">搜索</div>
		</van-search>
		<p class="watch"></p>
	</div>
</template>

<script>
	import logo from "@/assets/img/logo.png"
	import search from "@/assets/img/search.png"
	export default {
		name: "search",
		components: {

		},
		data() {
			return {
				logo: logo,
				search: search,
				value:'',
				siteInfo:{}
			}
		},
		props: ["keywords"],
		watch:{
			"keywords":function(){
				this.value = this.keywords
			}
		},
		mounted() {
			let sitedata = {
				site_id:this.$localStorage.get("site_id")||0
			}
			this.$api.home.siteInfo(sitedata).then(res => {
				// 执行某些操作
				if (res.code == 1) {
					this.siteInfo = res.data
					if(this.$localStorage.get("site_id") == 0){
						this.$set(this.siteInfo,"sitename",'')
					}
					this.$emit("setName",res.data.sitename)
				}
			
			})
		},
		methods: {
			onSearch() {
				this.$router.push({
					name: 'search',
					query: {
						keywords: this.value
					}
				})
			},
			clearData(){
				if(this.$localStorage.get("site_id")!=0){
					this.$localStorage.set("site_id",0)
					this.$localStorage.set("siteType",1)
					window.location.reload()
				}
			}
		}


	}
</script>

<style scoped lang="less">
	.search {
		padding: 0 0.78rem;
		background: #fff;

		.van-search__content {
			width: 16.06rem;
			height: 1.63rem;
			border: 1px solid rgba(254, 119, 0, 1);
			border-radius: 2px;
			background: none;
			color: #FFA25A;
			margin-right: 0.63rem;

			.van-field__control {
				font-size: 0.75rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 139, 61, 1);
				background: none;
			}

			.van-field__left-icon {
				color: #FFA25A;
			}

		}

		.van-search__action {
			width: 5.19rem;
			height: 1.63rem;
			background: rgba(255, 183, 115, 1);
			// border:1px solid rgba(255,150,74,1);
			border-radius: 2px;
			font-size: 0.81rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.logo {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding-top: 0.8rem;

			img {
				width: 1.56rem;
				margin-right: 0.5rem;
			}

			.name {
				span {
					display: block;
					font-size: 0.81rem;
					text-align: left;

					&:first-child {
						color: red;
					}

					&:last-child {
						color: #0062CC;
					}
				}


			}

		}

		.station-numner {
			font-size: 0.69rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(166, 166, 166, 1);
			text-align: left;
			margin: 0.66rem 0;
		}

		.watch {
			font-size: 0.75rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(166, 166, 166, 1);
			padding: 0.78rem 0;
			text-align: left;
		}


	}
</style>
<style lang="less">
	.search .van-icon-search:before {
		color: #FFA25A;
	}

	.search .van-search .van-cell {
		padding: 0 8px 0 0;
	}

	.search .van-field__body {
		height: 100%;
	}

	.search .van-field__control::placeholder {
		font-size: 0.75rem;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF8B3D;
		line-height: 1;
	}

	.search {
		.van-search {
			padding: 0;
		}
	}
</style>
